<template>
	<view class="all" :style="{
			height: $height()+'px'
	}">
		<u-navbar :is-back="true" :title="
		$ziti($store.state.ziti,type==1? '兑换优惠券': '我的優惠券')
		" title-bold  />
		<view class="warp">
			<view class="warp_carp" :style="{
	 'background-image':$img('https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-11/164696661330759.png'),
			 }" v-for="(item,index) in info" @click="dui(item)" v-if="type==1">
				<view class="warp_carp_1">
					<view class="warp_carp_1_1">
						<text>￥</text>
						<text>{{item.money}}{{ $ziti($store.state.ziti,'元')}}</text>
						<text>
							{{ $ziti($store.state.ziti,'優惠券')}}
						</text>
					</view>
					<view class="warp_carp_1_2">
						{{ $ziti($store.state.ziti,'有效期')}} {{item.end_time}}
					</view>
				</view>
				<view class="warp_carp_2_1">
					<text>1000{{ $ziti($store.state.ziti,'積分')}}</text>
					<text>{{ $ziti($store.state.ziti,'立即兌換')}}</text>
				</view>
			</view>
			<view class="warp_carp" v-for="(item,index) in info.data" v-if="!type">
				 <view class="warp_carp_1">
					<view class="warp_carp_1_1">
						<text>￥</text>
						<text>{{item.money}}元</text>
						<text>優惠券</text>
					</view>
					<view class="warp_carp_1_2">
						有效期：{{item.end_time}}
					</view>
				</view>
				<view class="warp_carp_2">
					<text>已兌換</text>
					<text @click="tiao">去使用</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				info: {}
			};
		},
		methods: {
			tiao() {
				uni.switchTab({
					url: "/pages/shopping/shopping"
				})
			},
			//兑换优惠券
			dui(item) {
				uni.showModal({
					title: '提示',
					content: '确定兑换此优惠券?',
					success: (res) => {
						if (res.confirm) {
							this.api('index/coupon_convert', {
								cou_id: item.id
							}).then(res => {
								this.$toast(res.msg)
							})
						} else if (res.cancel) {
							this.$toast('用户点击取消')
						}
					}
				});

			},
			getinfo() {
				let a = ""
				if (this.type) {
					a = "index/couponList"
				} else {
					a = "usermsg/couponLog"
				}
				this.api(a).then(res => {
					this.info = res.data
				})
			}
		},
		onLoad(a) {
			this.type = a.form ? a.form : "",
				this.getinfo()

		}
	}
</script>

<style lang="scss">
	.all {
		background-color: #F4F4F4;
	}

	.warp {
		padding: 30rpx 30rpx 100rpx 30rpx;
		position: relative;
		overflow: hidden;
		overflow: auto;

		.warp_foot {
			display: flex;
			justify-content: space-around;
			width: 100%;
			position: fixed;
			align-items: center;
			background-color: white;
			height: 100rpx;
			bottom: 0rpx;
			left: 0;

			text:nth-of-type(1) {
				display: block;
				width: 335rpx;
				text-align: center;
				line-height: 80rpx;
				height: 80rpx;
				background: #FFFFFF;
				border: 1rpx solid #00795E;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #00795E;
				border-radius: 40rpx;
			}

			text:nth-of-type(2) {
				width: 335rpx;
				height: 80rpx;
				background: #00795E;
				border-radius: 40rpx;
				text-align: center;
				;
				line-height: 80rpx;
				height: 80rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.warp_carp {
			height: 201rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 50rpx;
			background-image: url(https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164664831651147.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.warp_carp_2_1 {
				text {
					margin-right: 50rpx;
				}

				text:nth-of-type(1) {
					text-align: center;
					display: block;
					font-size: 30rpx;
					font-family: Source Han Serif CN;
					font-weight: 600;
					color: #00795E;
				}

				text:nth-of-type(2) {
					margin-top: 30rpx;
					text-align: center;
					display: block;
					font-size: 30rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #00795E;
				}
			}

			.warp_carp_2 {
				margin-right: 45rpx;

				text:nth-of-type(1) {
					font-size: 30rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #00795E;
				}

				text:nth-of-type(2) {
					margin-top: 10rpx;
					position: relative;
					right: 10rpx;
					display: block;
					width: 119rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background: #FFFFFF;
					border: 1rpx solid #00795E;
					border-radius: 30px;
					font-size: 26rpx;
					font-family: Source Han Serif CN;
					font-weight: 600;
					color: #00795E;
				}
			}

			.warp_carp_1_2 {
				font-size: 22rpx;
				font-family: Source Han Serif CN;
				font-weight: 500;
				color: #FFFFFF;
				opacity: 0.7;
				margin-top: 5rpx;
			}

			.warp_carp_1 {
				text:nth-of-type(1) {
					font-size: 30rpx;
					font-family: SourceHanSerifCN-Bold;
					font-weight: bold;
					color: #FFFFFF;
				}

				text:nth-of-type(2) {
					font-size: 60rpx;
					font-family: SourceHanSerifCN-Medium;
					font-weight: bold;
					color: #FFFFFF;
					margin: 0 5rpx 0 5rpx;
				}

				text:nth-of-type(3) {
					font-size: 30rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
